<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .showClock>span{
            display:inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height:30px;
            color: #fff;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <!-- <span ABC="ABC">123123</span> -->
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count</button></p>
        <hr>

        <time-count :second="100"></time-count>
        <br>
        <time-count :second="60">
            <template v-slot:default="slotScope">
                <p>父组件传入的内容:{{count}}</p>
                <p>子组件传出的数据:{{slotScope}}</p>
                <span v-if="slotScope.day>0">{{slotScope.day}}天</span>{{slotScope.hour}}时{{slotScope.min}}分{{slotScope.sec}}秒
            </template>
        </time-count>
        <br>
        <time-count :second="100000">
            <template v-slot="slotScope">
                <div v-if="slotScope.day>0">距离倒计时结束还有{{slotScope.day}}天:</div>
                <div class="showClock">
                    <span v-if="slotScope.hour>0">{{slotScope.hour}}</span>:
                    <span v-if="slotScope.min>0">{{slotScope.min}}</span>:
                    <span>{{slotScope.sec}}</span>
                </div>
            </template>
        </time-count>

        <time-count :second="100000">
            <!-- 插槽作用域解构   {day,hour,min,sec} = slotScope -->
            <template v-slot="{day,hour,min,sec}">
                <div v-if="day>0">距离倒计时结束还有{{day}}天:</div>
                <div class="showClock">
                    <span v-if="hour>0">{{hour}}</span>:
                    <span v-if="min>0">{{min}}</span>:
                    <span>{{sec}}</span>
                </div>
            </template>
        </time-count>

        <time-count :second="100000">
            <!-- 插槽作用域解构   {day,hour,min,sec} = slotScope -->
            <template #default="{day,hour,min,sec}">
                <div v-if="day>0">距离倒计时结束还有{{day}}天:</div>
                <div class="showClock">
                    <span v-if="hour>0">{{hour}}</span>:
                    <span v-if="min>0">{{min}}</span>:
                    <span>{{sec}}</span>
                </div>
            </template>
        </time-count>
    </div>
</body>

<template id="countDown">
    <div>
        <!-- xx天xx小时xx分xx秒   {day,hour,min,sec} -->
       <slot  :day="day"  :hour="hour" :min="min" :sec="sec"><span v-if="day>0">{{day}}天</span>{{hour}}时{{min}}分{{sec}}秒</slot>
    </div>
</template>
<script>
    // 插槽作用域: 父组件给子组件传入插槽内容时,可以使用子组件中的部分数据(子组件slot 标签中动态传入的数据)

    // 如何让 父组件给子组件传入插槽内容时,可以访问子组件中独有的数据 => (Vue内部处理得到 => 并不是直接传出来)
    // 1. 子组件需要在slot组件中,动态绑定属性 => 绑定的属性默认会整合到一个对象中 => {day,hour,min,sec}
    // 2. 父组件可以借助v-slot对应插槽名称,用指令值接收数据,并在插槽内容中使用数据  <template v-slot:name="指令值"></<template> 

    // 可以理解为
    // 1. 父组件传入插槽内容时默认先解析一次 (此时可以使用父组件中的数据)
    // 2. 子组件接收传入的插槽内容时,也会解析一次 (此时可以使用slot组件中动态绑定的属性  => 会整合为一个对象)
 
    let TimeCount = {
        props: {
            second: {
                type: Number,
                required: true,
                validator: function (val) {
                    if (val > 0 && val % 1 == 0) {
                        return true;
                    }
                    return false;
                }
            },
        },
        data() {
            return {
                time: this.second, // 将父组件传入的数据second作为子组件time的初始值 
                timer: null,
            }
        },
        template: "#countDown",
        methods: {
            updateTime() {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.time--;
                    if (this.time == 0) {
                        clearInterval(this.timer);
                    }
                }, 1000)
            }
        },
        computed: {
            day() {
                return Math.floor(this.time / (24 * 60 * 60));
            },
            hour() {
                return (Math.floor(this.time / (60 * 60)) % 24).toString().padStart(2, "0");
            },
            min() {
                return (Math.floor(this.time / 60) % 60).toString().padStart(2, "0");
            },
            sec() {
                return (this.time % 60).toString().padStart(2, "0");
            }
        },
        mounted() {
            console.log("当前组件",this);
            this.updateTime();

        }

    }


    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
            count: 1,
        },
        components: {
            TimeCount: TimeCount,
        },
        
    })

    console.log("根组件",vm);

</script>

</html>